<div class="modal fade" id="modal-migrate-204" tabindex="-1" role="dialog" aria-labelledby="modal-migrate-204" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" data-i18n="modalMigrationTitle">Migrate from RESTClient 2</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#204-migration-help" role="tab" data-i18n="modalMigrationHowTo">How to</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#204-migrate" role="tab" data-i18n="modalMigrationMigrate">Migrate</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane container active" id="204-migration-help" role="tabpanel">
                        <p class="text-muted m-t-xlg" data-i18n="modalMigrationReason">
                            Firefox 57 drops support for legacy API for accessing preferences system in Firefox. RESTClient 2 uses preferences to store your favorited headers, urls, and requests. To import your old favorites data, you will have to do it manually.
                        </p>
                        <p class="m-t-md" data-i18n="modalMigrationConfig">
                            This following content describes how to use the <code>about:config</code> page to get RESTClient2 preference settings.
                        </p>
                        <h5 class="m-t-lg" style="font-size: 16px;" data-i18n="modalMigrationStep1">1. Opening about:config</h5>
                        <p class="m-t-md" data-i18n="modalMigrationStep1Info">
                            In the address bar, type <code>about:config</code> and press Return. <br/> The about:config "This might void your warranty!" warning page may appear. Click I accept the risk! to continue to the about:config page.
                        </p>
                        <p>
                            <img src="images/migration/204-1.png" class="img-fluid rounded" data-i18n="imageMigration2041" data-i18n-target="src">
                        </p>
                        <h5 class="m-t-xlg" style="font-size: 16px;" data-i18n="modalMigrationStep2">2. Searching for RESTClient preferences and copy RESTClient2 settings</h5>
                        <p class="m-t-md" data-i18n="modalMigrationStep2Info">
                            You can enter <code>restclient</code> in the <code>Search</code> box at the top of the <code>about:config</code> page to quickly find <code>RESTClient</code> preferences.
                        </p>
                        <p>
                            <img src="images/migration/204-2.png" class="img-fluid rounded" data-i18n="imageMigration2042" data-i18n-target="src">
                        </p>
                        <h5 class="m-t-xlg" style="font-size: 16px;" data-i18n="modalMigrationStep3">3. Go to <code>migrate</code> tab panel paste settings</h5>
                        <p class="m-t-md" data-i18n="modalMigrationStep3Info">
                            You will need to copy and paste the following values: 
                        </p>
                        <p class="m-t-md m-b-lg">
                            <button class="btn btn-md btn-primary btn-switch-migrate-tab" data-i18n="modalMigrationTabSwitcher">Go to migrate panel</button>
                        </p>
                    </div>
                    <div class="tab-pane container" id="204-migrate" role="tabpanel">
                        <!-- 204-migrate -->
                        <div class="form-group row m-t-md">
                            <label for="204-migrate-urls" class="col-sm-3 col-form-label" data-i18n="modalMigrationURL">Favorite URLs</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" id="204-migrate-urls" rows="3" placeholder='["http://www.facebook.com", "http://www.google.com"]'></textarea>
                                <small id="204-migrate-urls-helper" class="form-text text-muted" data-i18n="modalMigrationURLHelper">
                                    Paste preference <span class="text-danger">`extension.restclient.cachedUrls`</span> value.
                                </small>
                            </div>
                        </div>
                        <div class="form-group row m-t-md">
                            <label for="204-migrate-headers" class="col-sm-3 col-form-label" data-i18n="modalMigrationHeader">Favorite Headers</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" id="204-migrate-headers" rows="3" placeholder='[["Accept","application/json"], ["Content-type", "text/xml"]]'></textarea>
                                <small id="204-migrate-headers-helper" class="form-text text-muted" data-i18n="modalMigrationHeaderHelper">
                                    Paste preference <span class="text-danger">`extension.restclient.favoriteHeaders`</span> value.
                                </small>
                            </div>
                        </div>
                        <div class="form-group row m-t-md">
                            <label for="204-migrate-requests" class="col-sm-3 col-form-label" data-i18n="modalMigrationRequest">Favorite Requests</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" id="204-migrate-requests" rows="3" placeholder='{\n  "example":    \n{  \n"method":"POST",  \n"url":"http://www.example.com",  \n"body":"request body",  \n"overrideMimeType":false,  \n"headers":[ [ "Accept", "xml" ] ]  \n}\n }'></textarea>
                                <small id="204-migrate-requests-helper" class="form-text text-muted" data-i18n="modalMigrationRequestHelper">
                                    Paste preference <span class="text-danger">`extension.restclient.savedRequest`</span> value.
                                </small>
                            </div>
                        </div>
                        <div class="form-group row m-t-md">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-9">
                                <button type="button" class="btn btn-primary btn-migrate" data-i18n="modalMigrationDoItNow">Migrate it now</button>
                            </div>
                        </div>
                        <!-- 204-migrate end -->
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning btn-ignore" data-i18n="modalMigrationDontBotherMe">Don't bother me</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="modalClose">Close</button>
            </div>
        </div>
    </div>
</div>